import styles from './index.module.css'
import { Input, Card, Tag, Space } from 'antd'
import { FireOutlined, UnorderedListOutlined } from '@ant-design/icons'
import type { SearchProps } from 'antd/es/input'
import ToolsGroup, {ToolsItemType} from '@/components/ToolsGroup'
import OpDrawer from './op_drawer'
import { useState } from 'react'

import { json, jwt, time, url, qrc } from '@/assets/use'

const { Search } = Input;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
  console.log(info?.source, value)
};

const tgs:ToolsItemType[] = [
  {
    text: 'JSON格式化/编辑',
    jump: 'www.baidu.com',
    icon: () => <img width="40px" src={json}/>,
    code: 'json-edit'
  },
  {
    text: '时间戳/日期转换',
    jump: 'www.baidu.com',
    code: 'time-conv',
    icon: () => <img width="40px" src={time}/>,
  },
  {
    text: 'JWT编解码',
    jump: 'www.baidu.com',
    icon: () => <img width="40px" src={jwt}/>,
    code: 'jwt-decode'
  },
  {
    text: 'URL编解码',
    jump: 'www.baidu.com',
    code: 'url-decode',
    icon: () => <img width="40px" src={url}/>,
  },
  {
    text: '正则表达式可视化',
    jump: 'www.baidu.com',
    code: 'regexper-ui',
    icon: () => <img width="40px" src={qrc}/>,
  },
  {
    text: 'SQL/PLSQL格式化',
    jump: 'www.baidu.com',
    code: 'sql-formatter',
    icon: () => <img width="40px" src={json}/>,
  }

]

export default function Index() {

  const [opDrawerData, setOpDrawerData] = useState<{open: boolean, data?:ToolsItemType}>({open: false})

  const tgOnClick = (item:ToolsItemType) => {
    setOpDrawerData({open: true, data: item})
  }

  const opDrawerClose:(e:React.MouseEvent | React.KeyboardEvent) => void = (e) => {
    console.log(e)
    setOpDrawerData({open: false})
  }

  return (
    <div>
      <div>
        <Card style={{textAlign: "center"}}>
          <div><span className={styles.searchTopTip}>456</span>个在线工具 ， 累计使用 <span className={styles.searchTopTip}>29998608</span> 次</div>
          <Search
            allowClear
            size="large"
            placeholder="请输入工具名称或关键词"
            style={{ width: '90%' }}
            onSearch={onSearch}
            enterButton="搜索"
            />
            <div style={{marginTop: "10px"}}>
              <FireOutlined />
              <span style={{padding: "0 10px"}}>热搜工具:</span>
              <Tag color='blue'>
                <a href="https://github.com/ant-design/ant-design/issues/1862">PPT转换</a>
              </Tag>
              <Tag color='blue'>
                <a href="https://github.com/ant-design/ant-design/issues/1862">JSON格式化</a>
              </Tag>
            </div>
        </Card>
        <Space direction="vertical" size="large" style={{ display: 'flex' }}>
          <ToolsGroup onClick={(item) => tgOnClick(item)} name='常用工具' items={tgs} icon={() => <UnorderedListOutlined />} />
          <ToolsGroup name='开发工具' items={tgs} icon={() => <UnorderedListOutlined />} />
          <ToolsGroup name='格式转换' items={tgs} icon={() => <UnorderedListOutlined />} />
          <ToolsGroup name='生活日常' items={tgs} icon={() => <UnorderedListOutlined />} />
          <ToolsGroup name='热站导航' items={tgs} icon={() => <UnorderedListOutlined />} />
        </Space>

      </div>
      {
        opDrawerData.open && <OpDrawer op={opDrawerData} onClose={e => opDrawerClose(e)}/>
      }
      
    </div>
  )
}
